<!--侧导航-->
<template>
    <div>
        <div class="siderbar" :style="{width:siderwidth}">
            <div v-for="(item,index) in real_sideRoutes" :key="index">
                <div :class="['siderbar-one f',{siderBarcolor:item.path == $store.state.siderbarOne || $store.state.siderbarOne==''}]" v-if="!item.hidden" @click="confirmsider(index)">
                    <div class="right-blue" v-if="item.path == $store.state.siderbarOne || $store.state.siderbarOne==''"></div>
                    <!-- 有孩子就不给点击跳转--显示标题和下拉icon -->
					<div v-if='item.children && item.children.length' class="f f-a-c">
                        <svg-icon :icon-class="item.meta.icon || ''"></svg-icon>
                        <span  @click="openclose(item)">{{item.meta.title}}</span>
                        <div :class="opensider == index ? 'threeopen':'three'"></div>
                    </div>
					<router-link v-else :to="{name:item.path}"  class="f">
                        <span style="display: block;width: 160px;height: 100%">
                            <svg-icon :icon-class="item.meta.icon || ''"></svg-icon>
                            {{item.meta.title}}
                        </span>
                    </router-link>
                </div>
<!--                侧边栏二级的子菜单-->
                <div v-for="(itemtwo,indextwo) in item.children" :key="indextwo" v-if='opensider == index'>
                    <div class="siderbar-one" style=" text-align: center;" v-if="!itemtwo.hidden">
						<!-- 千万别用path去跳转--三级路由各种bug -->
                        <router-link :to="{name:itemtwo.path}" class="rk">
                            <span :class="['bartwo',{bartwoBGcolor:$store.state.siderbarTwo == itemtwo.path}]" @click="selectchildentwo(indextwo,itemtwo)">{{itemtwo.meta.title}}</span>
                        </router-link>
                    </div>
                </div>
            </div>
        </div>
        <div class="closesider f f-a-c" :style="{left:closeLeft}">
            <i :class="siderwidth == '180px' ? 'iconfont iconzuoceshouqi':'iconfont iconzuocezhankai'" @click="changesiderwidth()"></i>
            <div class="positionright">
                <i class="iconfont icon-youce- move ar-animated ar-delay-1s" v-if="siderwidth == '4px' "></i>
                <i class="iconfont icon-youce- move ar-animated ar-delay-2s" v-if="siderwidth == '4px' "></i>
            </div>
        </div>
    </div>
</template>

<script>
    import {filterHiddenRoutes} from "@/utils";

    export default {
        name: "sidebar",
        data(){
            return{
                sidercolor:'0',//记录侧边栏一级哪个是点击状态
                // siderchildren:'',//记录侧边栏二级哪个是点击状态--根据路由的名字匹配来判断
                opensider:'0',//下拉打开二级菜单判断
                siderwidth:'180px',//动态的左侧边栏的宽度
                closeLeft:'163px',//左侧导航栏收起的图标位置
            }
        },
        props:{
            //接收头部导航传递过来的路由值
            SiderRouter:{
                type:Array,
                default:[]
            }
        },
        computed: {
          real_sideRoutes() {
              return filterHiddenRoutes(this.SiderRouter)
          }
        },
        methods:{
            //更改左侧导航栏的宽度
            changesiderwidth(){
                if(this.siderwidth == '180px'){
                    this.siderwidth = '4px';
                    this.closeLeft = '-15px';
                    //改变父组件中appmain的左侧距离
                    this.$emit('changewidth','10px')
                }else{
                    this.siderwidth = '180px';
                    this.closeLeft = '163px';
                    this.$emit('changewidth','180px')
                }

            },
            //点击侧边栏给侧边栏上色--并且设置缓存--用于界面刷新取值进行状态回调
            confirmsider(index){
                this.sidercolor = index;
                if(this.opensider == index){
                    this.opensider = '0';
                }else{
                    this.opensider = index;
                }
            },

			//下拉打开二级菜单
			openclose(item){
				// console.log(item);
			},

            //点击侧边栏的二级子菜单
            selectchildentwo(indextwo,itemtwo){

            }
        }
    }
</script>

<style scoped lang="scss">
    /*动画*/
    .ar-animated{-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;font-style:inherit;-webkit-animation-timing-function:linear;animation-timing-function:linear;}
    @keyframes move {
        0% {left: 0%;	 opacity: 0; }
        70% { left: 70%; opacity: 1 }
        100% {left: 100%;opacity: 0;}
    }
    .move{-webkit-animation-name:move;animation-name:move;position:relative;margin-left:-16px;}
    .ar-delay-1s{animation-delay:0.1s;}
    .ar-delay-2s{animation-delay:0.2s;}
    .ar-delay-3s{animation-delay:0.3s;}
    .ar-delay-4s{animation-delay:0.4s;}
    i{
        margin-left: 30px;
        margin-right: 10px;
    }
    .closesider{
        position: fixed;
        top:50%;
        transition: .5s;
        z-index: 100;
        /*background-color: #7f8186;*/
        .iconfont{
            font-size: 40px;
            color: #7f8186;
            cursor: pointer;
            transition: 0.5s;
            margin: 0;
        }
        .icon-zuoceshouqi , .icon-zuocezhankai{
            &:hover{
                color:#409eff;
                font-size: 42px;
            }
        }
        .positionright{
            margin-left: -5px;
            width: 10px;
            height: 20px;
            position: relative;
            .icon-youce-{
                top:3px;
                position: absolute;
                font-size: 12px;

            }
        }
    }
    .siderbar{
        position: fixed;
        z-index: 100;
        top: 65px;
        left: 0;
        height: 100%;
        overflow: hidden;
        background-color: rgba(255, 255, 255, 100);
        color: #999999;
        font-size: 14px;
        box-shadow: 14px 0px 7px 0px rgba(227, 227, 227, 40);
        border: 1px solid rgba(255, 255, 255, 100);
        transition: .5s;
        .right-blue{
            width: 6px;
            height: 41px;
            line-height: 20px;
            border-radius: 0px 8px 8px 0px;
            background-color: rgba(43, 79, 131, 100);
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 100);
            margin-top: 10px;
        }
        .siderbar-one{
            width: 100%;
            height: 60px;
            font-size: 16px;
            line-height: 60px;
            cursor: pointer;
            color:#999999;
            span{
                width: 100%;
                display: block;
                height: 100%;
            }
            .rk{
                /*display: block;*/
                /*width: 100%;*/
                /*padding-left: 60px;*/
            }
			.three{
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 3px 0 3px 4px;
				border-color: transparent transparent transparent #333333;
				margin-left: 20px;
                transition: .3s;
			}
			.threeopen{
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 3px 0 3px 4px;
				border-color: transparent transparent transparent #333333;
				margin-left: 20px;
                transition: .3s;
				transform:rotate(90deg);
			}
			.bartwo{
				font-size: 14px;
			}
            .bartwoBGcolor{
                background-color: rgba(240, 240, 240, 100);
            }
            &:hover{
                background-color: rgba(240, 240, 240, 100);
            }
        }
        .siderBarcolor{
            /*background-color: #637286 !important;*/
            color: rgba(51, 51, 51, 100);
            font-weight: bold;
            background-color: rgba(240, 240, 240, 100);
        }
        span{
            color:#333333;
        }
    }
</style>
